<template>
  <div>
    <img src="./assets/logo.png" alt="logo" srcset="" />
    <h1>我是App组件</h1>
    <!-- 通过父组件向子组件传递函数props进行通信 -->
    <School :getSchoolName="getSchoolName" />

    <hr />

    <!-- 
      方式一:通过v-on:eventName或@eventName 绑定监听子组件的自定义事件
     -->
    <!-- <Student v-on:getStudentName="getStudentName" /> -->
    <Student
      @getStudentName="getStudentName"
      @demo="demo"
      @click.native="click"
    />
    <!-- <Student @getStudentName.once="getStudentName" /> -->
    <!-- 通过ref获取子组件实例对象，手动绑定监听子组件自定义事件  -->
    <!-- <Student ref="student" /> -->
  </div>
</template>

<script>
import Student from "./components/Student";
import School from "./components/School";
export default {
  name: "App",
  components: {
    Student,
    School,
  },
  methods: {
    getSchoolName(name) {
      console.log("App组件接收到了学校名称", name);
    },
    getStudentName(name) {
      console.log("App组件接收到了学生名称", name);
    },
    demo() {
      console.log("demo 回调被触发了");
    },
    click() {
      console.log("原生点击事件");
    },
  },
  // mounted() {
  //   this.$refs.student.$on("getStudentName", this.getStudentName);
  //   this.$refs.student.$once("getStudentName", this.getStudentName);
  // },
};
</script>
